<template>
    <div class="history-wrap">
        <ul class="history-list">
            <li v-for="(item, index) in historyList" :key="index + item.createtime" class="single" :class="{ 'active' : history.historyIndex === historyList.length - index - 1}" @click="setHistoryIndex(index)">
                {{ setTime(historyList[historyList.length - index - 1].createtime) + '&nbsp;&nbsp;&nbsp;&nbsp;' + history.action[(historyList[historyList.length - index - 1].label)] }}
            </li>
        </ul>
    </div>
</template>

<script>
import history from '@/js/main/history.js';
import util from '@/js/util/util.js';
import line from '@/js/main/line.js';
import store from '@/js/store/state.js';
import register from '@/js/main/register.js';

export default {
    data() {
        return {
            history: history,
            historyList: history.getHistoryList(),
            line: line,
            store: store
        };
    },
    mounted() {},
    methods: {
        setTime(val) {
            return util.numberToTime(val);
        },
        setHistoryIndex(index) {
            let state = history.moveToIndex(this.historyList.length - index - 1);
            if (state) {
                store.set(state);
                register.redrawAll();
                line.initialize();
                line.setElementList(store.getElementList());
            }
        }
    }
};
</script>

<style scoped lang="scss">
.history-wrap {
    height: calc(100vh - 125px);
    overflow: auto;
}
.history-list {
    .single {
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #05090c;
        padding: 0 0 0 20px;
        cursor: pointer;
    }
    .active {
        background: #ffffff26;
    }
}
</style>